<template>
  <div>
    PortalVue1
    <portal to="destination" :disabled="disable" :order="1">
      <p style="color: red">
        this is page1-1
      </p>
    </portal>
    <portal to="destination" :disabled="disable" :order="2">
      <p style="color: red;position: fixed;top: 350px;">
        this is page1-2
      </p>
    </portal>
    <portal to="destination1" :disabled="disable">
      <p style="color: greenyellow;position: absolute;right: 10px;top: 300px">this is page1 </p>
    </portal>
    <portal to="destination2" v-if="!disable">
      <!-- 通过slot实现  这个是父组件-->
      <!-- 子组件通过slot传值过来-->
      <div>
        <p style="color: blue">this is page1 </p>
      </div>
    </portal>
    <portal to="destination3">
      <template v-slot:default="test">
        {{test}}
        <!--        <p slot-scope="slotProps">1{{slotProps.msg}}{{slotProps.num}}2</p>-->
      </template>
    </portal>

    <portal to="destination4">
      <transition name="fade">
        <p v-if="disable" key="1">You have new messages</p>
        <p v-else key="2">No unread messages</p>
      </transition>
    </portal>

    <portal to="destination5">
      <p slot-scope="props">This scoped slot content is {{ props.state }}</p>
    </portal>
    <button @click="$router.push('/portal2')">to destination</button>
    <button @click="disable=!disable">change</button>
  </div>
</template>

<script>
  export default {
    name: "PortalVue1",
    model: {},
    props: {},
    data() {
      return {
        disable: true
      }
    },
    computed: {},
    beforeCreate: function () {

    },
    created: function () {

    },
    beforeMount: function () {

    },
    mounted: function () {

    },
    updated: function () {

    },
    activated: function () {

    },
    deactivated: function () {

    },
    beforeDestroy: function () {

    },
    destroyed: function () {

    },
    methods: {}
  }
</script>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
  }
</style>
